<template>
  <div>
    <!-- 导航条 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0"> 企业官网 </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="1" @click="tologin">登录</el-menu-item>
    </el-menu>
    <!-- 搜索框 -->
    <div class="search">
      <el-input
        v-model="input2"
        class="w-50 m-2"
        placeholder="Type something"
        :prefix-icon="Search"
        style="height: 32px"
      />
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

import { ref } from "vue";
import { useRouter } from "vue-router";
const input2 = ref("");
const router = useRouter();
const activeIndex = ref("0");
function search() {
  if (input2.value !== "") {
    router.push({
      path: "selgoods",
      query: {
        search: input2.value,
      },
    });
  } else {
    ElMessage.info("请输入搜索内容");
  }
}
function tologin() {
  router.push("/login");
}
function handleSelect() {}
</script>
<style scoped>
.el-menu-demo {
  padding: 0 10%;
  box-sizing: border-box;
}

.flex-grow {
  flex-grow: 1;
}
.search {
  width: 100%;
  height: 80px;
  background-color: #fff;
  margin: 0 auto;
  display: flex;
  padding: 0 10%;
  padding-top: 20px;

  box-sizing: border-box;
}
.el-button {
  margin-left: 10px;
}
</style>
